<template>
    <div>
        <city-header></city-header>
        <city-list :hotCities="hotCities" :cities="cities"></city-list>
        <city-alphabet></city-alphabet>
    </div>
</template>
<script>
import axios from 'axios';
import CityHeader from './components/Header';
import CityList from './components/List';
import CityAlphabet from './components/Alphabet';

export default {
    name: 'City',
    components: {
        CityHeader,
        CityList,
        CityAlphabet,
    },
    data() {
        return {
            hotCities: [],
            cities: {},
        };
    },
    methods: {
        getCityInfo() {
            axios.get('/api/city.json').then(this.getCityInfoSucc);
        },
        getCityInfoSucc(respose) {
            // console.log(respose);
            const res = respose.data;
            if (res.ret && res.data) {
                const data = res.data;
                /* 把static/mock目录下的模拟数据赋给当前页面的数组 */
                this.hotCities = data.hotCities;
                this.cities = data.cities;
            }
        },
    },
    mounted() {
        this.getCityInfo();
    },
};
</script>
<style scoped></style>
